<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下划线过渡效果</title>
		<style>
			div {
				margin: 100px;
				width: 360px;
				font-size: 28px;
				line-height: 50px;
			}
			span {
				/* 行内元素才能实现的效果 */
				display: inline;
				cursor: pointer;
				background: linear-gradient(to right, #000, #000) no-repeat left bottom;
				background-size: 0 2px;
				transition: background-size .6s;
			}
			span:hover {
				background-size: 100% 2px;
			}
		</style>
	</head>
	<body>
		<div>
			<span>这是一个很有意思的下划线过渡效果</span>
		</div>
		<script></script>
	</body>
</html>